<template>
  <view class="gg-specs">
    <!-- 规格 -->
    <view class="gg-specs-area">
      <view class="gg-specs-sort-area" v-for="(item, index1) in spu" :key="index1">
        <!-- 规格类别名称 -->
        <view class="gg-specs-sort-name">
          <text>{{item.name}}</text>
        </view>
        <!-- 规格列表 -->
        <view class="gg-specs-sort-list">
          <view class="gg-specs-sort-list-details" v-for="(item_value, i) in item.items" :key="i"
            :class="[item_value.ishow ? '' : 'disabled', subIndex[index1] == i ? 'selected' : '']" @tap="skuClick(item_value, index1, $event, i)">
            <text>{{item_value.name}}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 数量 -->
    <view class="gg-number" v-if="disabledNumber===false">
      <view class="gg-number-title"><text>购买数量</text></view>
      <view class="gg-number-right">
        <view class="gg-number-right-cut" :class="numberCutDisabled?'disabled':''" @tap="changeNumber('cut')">
          <view class="gg-number-right-cut-fill"></view>
        </view>
        <view class="gg-number-right-num">{{localNumber}}</view>
        <view class="gg-number-right-plus" :class="numberPlusDisabled?'disabled':''" @tap="changeNumber('plus')">
          <view class="gg-number-right-cut-fill-h"></view>
          <view class="gg-number-right-cut-fill-s"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "GgSpecs",
  options: {
    addGlobalClass: true,
  },
  props: {
    specList: {
      type: Object,
      default() {
        return {}
      }

    },
    skuList: {
      type: Object,
      default() {
        return {}
      }
    },
    disabledNumber: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  watch: {
    localNumber() {
      this.change();
    },
    selectArr: {
      deep: true,
      handler(newVal) {
        this.change();
      }
    },
    specList() {
      this._dealData();
    },
    skuList() {
      this._dealData();
    }
  },
  data() {
    return {
      spu: [], //spu规格列表
      sku: [], //sku列表
      shopItemInfo: {}, //存放要和选中的值进行匹配的数据
      selectArr: [], //存放被选中的值
      subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
      selectshop: {}, //存放最后选中的商品
      localNumber: 1,
      numberCutDisabled: true,
      numberPlusDisabled: false,
      numberMax: 99,
    };
  },
  created: function () {
    this._dealData();

  },
  methods: {
    //初始化数据
    _dealData() {
      this.spu = this.specList.items; //spu规格列表
      this.sku = this.skuList.items; //sku列表
      this.shopItemInfo = {}; //存放要和选中的值进行匹配的数据
      this.selectArr = []; //存放被选中的值
      this.subIndex = []; //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
      this.selectshop = {}; //存放最后选中的商品
      if (this.spu && this.sku && this.spu.length > 0 && this.sku.length > 0) {
        this.spu.map(item => {
          this.selectArr.push('');
          this.subIndex.push(-1);
        });
        this.checkItem(); //计算sku里面规格形成路径
        this.checkInpath(-1); //传-1是为了不跳过循环
      }
    },
    skuClick(value, index1, event, i) {
      if (value.ishow) {
        if (this.selectArr[index1] != value.name) {
          this.$set(this.selectArr, index1, value.name);
          this.$set(this.subIndex, index1, i);
        } else {
          this.$set(this.selectArr, index1, '');
          this.$set(this.subIndex, index1, -1);
        }
        this.checkInpath(index1);
        //如果全部选完
        if (this.selectArr.every(item => item != '')) {
          this.selectshop = this.shopItemInfo[this.selectArr];

          this.localNumber = 1;
          this.numberMax = this.selectshop.stock
        } else {
          this.selectshop = {};
        }
      }
    },
    checkInpath(clickIndex) {
      //循环所有属性判断哪些属性可选
      //当前选中的兄弟节点和已选中属性不需要循环

      for (let i = 0, len = this.spu.length; i < len; i++) {
        if (i == clickIndex) {
          continue;
        }
        let len2 = this.spu[i].items.length;
        for (let j = 0; j < len2; j++) {
          if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
            continue;
          }
          let choosed_copy = [...this.selectArr];
          this.$set(choosed_copy, i, this.spu[i].items[j].name);
          let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
          if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
            this.$set(this.spu[i].items[j], 'ishow', true);
          } else {
            this.$set(this.spu[i].items[j], 'ishow', false);
          }
        }
      }
    },
    checkItem() {
      //计算可选路径
      let result = this.sku.reduce(
        (arrs, items) => {
          return arrs.concat(
            items.sku.reduce(
              (arr, item) => {
                return arr.concat(
                  arr.map(item2 => {
                    //利用对象属性的唯一性实现二维数组去重
                    if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
                      this.shopItemInfo[[...item2, item]] = items;
                    }
                    return [...item2, item];
                  })
                );
              },
              [[]]
            )
          );
        },
        [[]]
      );
    },
    changeNumber(type) {
      if (type == 'cut') {
        if (!this.numberCutDisabled) {
          this.localNumber = --this.localNumber
        } else {
          return;
        }
      } else if (type == 'plus') {
        if (!this.numberPlusDisabled) {
          this.localNumber = ++this.localNumber
        } else {
          return;
        }

      }
      if (this.localNumber <= 1) {
        this.numberCutDisabled = true;
        this.localNumber = 1;
      } else {
        this.numberCutDisabled = false;
      }
      if (this.localNumber >= this.numberMax) {
        this.localNumber = this.numberMax
        this.numberPlusDisabled = true;
      } else {
        this.numberPlusDisabled = false;

      }
    },
    change() {
      let data = {};
      data.sku = this.selectshop
      data.selectSpecs = [...this.selectArr];
      if (this.disabledNumber === false) {
        data.number = this.localNumber;
      }
      this.$emit('change', data)
    },
  }
};
</script> 
<style >
.gg-specs {
  padding: 0 10px;
  background-color: #ffffff;
}
.gg-specs-sort-area {
  border-top: solid 1px rgba(0, 0, 0, 0.03);
}
.gg-specs-sort-name {
  color: #000000;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
}
.gg-specs-sort-list {
  display: flex;
  flex-wrap: wrap;
}
.gg-specs-sort-list-details {
  height: 30px;
  background-color: rgba(0, 0, 0, 0.03);
  border: solid 1px rgba(0, 0, 0, 0.03);
  color: rgb(0, 0, 0);
  border-radius: 5px;
  line-height: 30px;
  font-size: 14px;
  padding: 0 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.gg-specs-sort-list-details.selected {
  background-color: rgba(255, 80, 0, 0.03);
  border-color: rgb(255, 80, 0);
  color: rgb(255, 80, 0);
}
.gg-specs-sort-list-details.disabled {
  color: rgba(0, 0, 0, 0.3);
}
.gg-number {
  overflow: auto;
  border-top: solid 1px rgba(0, 0, 0, 0.03);
  font-size: 14px;
  color: #000000;
}
.gg-number-title {
  height: 50px;
  line-height: 50px;
  float: left;
}
.gg-number-right {
  float: right;
  display: flex;
  flex-wrap: wrap;
  height: 31px;
  line-height: 31px;
  text-align: center;
  margin-top: 10px;
}
.gg-number-right-cut,
.gg-number-right-num {
  margin-right: 2px;
  position: relative;
}
.gg-number-right-cut,
.gg-number-right-plus {
  width: 33px;
  background-color: rgba(0, 0, 0, 0.08);
}
.gg-number-right-cut.disabled,
.gg-number-right-plus.disabled {
  background-color: rgba(0, 0, 0, 0.03);
}
.gg-number-right-num {
  width: 41px;
  background-color: rgba(0, 0, 0, 0.08);
  font-size: 16px;
}
.gg-number-right-cut-fill,
.gg-number-right-cut-fill-h {
  width: 15px;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.3);
  margin: auto;
  margin-top: 15px;
}
.gg-number-right-cut-fill-s {
  width: 1px;
  height: 15px;
  background-color: rgba(0, 0, 0, 0.3);
  margin: auto;
  margin-top: -8px;
}
</style>
